<template>
  <div>
      <el-switch
        v-model="showEdit"
        size="large"
        active-text="显示"
        inactive-text="编辑" />
       <el-button size="mini" type="primary" @click="handleSubmit">保存</el-button>
  </div>
  <div class="form-widget-canvas" style="height:800px">
      <el-divider content-position="left">查询</el-divider>
      <div>查询建设</div>

      <el-divider content-position="left">工具栏</el-divider>
      <div>
          <buttonBoolBar></buttonBoolBar>
      </div>

      <el-divider content-position="left">表格配置</el-divider>
      <div>查询建设</div>
  </div>
</template>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watch, onMounted, getCurrentInstance, toRefs } from 'vue'
    import draggable from "vuedraggable"

    import buttonBoolBar from '../../container/buttonToolBar';
    //import fieldDrag  from './fieldDrag.vue'
    const state = reactive({
        showEdit: true,
        widgetList: [
          {type: 'table', category: 'page', icon: 'grid', name:'工具条'}
        ]
    });
    const {
        showEdit,
        widgetList
    }  = toRefs(state);

    //拖拽开始的事件
    const onStart = (origin) => {
       console.log("开始拖拽");
        console.log(origin);
    };

    //拖拽结束的事件
    const onEnd = () => {
       console.log("结束拖拽");
      
    };

    const onMove = (e, originalEvent) => {
        //不允许停靠
     //   if (e.relatedContext.element.disabledPark == true) return false;

        return true;
    };

</script>
<style lang="scss" scoped>
   /* 隐藏组件拖拽状态中显示的黑点 */
    :deep(li.container-widget-item), :deep(li.field-widget-item) {
      list-style: none;
    }
</style>

